<!--菜单组件-->
<template>
  <a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" :mode="mode" :theme="theme" @select="select">
    <BaseMenuItem :data="data" />
  </a-menu>
</template>

<script lang="ts" setup>
import BaseMenuItem from './BaseMenuItem.vue'
import { ref, defineProps, onMounted, withDefaults } from 'vue'
import { useRouter } from 'vue-router'
import { menu } from '../../../entity/system/menu'
const props = withDefaults(
  defineProps<{
    // 菜单数据
    data: Array<menu>
    // 是否只展开当前父级菜单
    isOnlyOpenParentMenu: boolean
    // 模式 vertical | horizontal | inline
    mode: 'vertical' | 'horizontal' | 'inline'
    // 主题 light | dark
    theme: string
    // 跳转前缀
    urlPreFix: string
  }>(),
  {
    data: () => [],
    isOnlyOpenParentMenu: true,
    mode: 'inline',
    theme: 'light',
    urlPreFix: '/',
  },
)
// 当前选择的菜单项
let selectedKeys = ref<string[]>([])
// 当前打开的菜单项
let openKeys = ref<string[]>([])
onMounted(() => {
  if (props.data.length > 0) {
    const menu = props.data as Array<menu>
    // 只找二级菜单
    const secondMenu = menu.filter((menu) => menu.children && menu.children.length > 0)
    if (secondMenu.length > 0) {
      const menuList = secondMenu[0] as unknown as menu
      openKeys.value.push(menuList.name as unknown as string)
      selectedKeys.value.push(menuList.children[0].url as unknown as string)
      // 默认打开
      router.push(props.urlPreFix + menuList.children[0].url)
    }
  }
})
const router = useRouter()
// 菜单项被选中时跳转
function select({ key }: any) {
  router.push(props.urlPreFix + key)
}
</script>

<style scoped lang="scss"></style>
